<template>
	<view class="home-container">
		<!-- 搜索框 -->
		<view class="search-box" :class="{focus:isFocus}">
			<input @focus="isFocus=true" @blur="isFocus=false" type="text" placeholder="搜索" />
			<icon type="search" size="20"></icon>
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swipers" :key="index">
				<view class="swiper-item">
					<image :src="item.image_src" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav-box">
			<image v-for="item in navs" :key="item.name" :src="item.image_src" mode=""></image>
		</view>
		<!-- 楼层数据 -->
		<view class="floor-box" v-for="(item,index) in floors" :key="index">
			<!-- 头部 -->
			<view class="header">
				<image :src="item.floor_title.image_src" mode=""></image>
			</view>
			<!-- 底部 -->
			<view class="bottom">
				<!-- 左侧图片 -->
				<image :src="item.product_list[0].image_src" mode=""></image>
				<!-- 右侧 -->
				<view class="right">
					<template v-for="(it,i) in item.product_list">
						<image v-if="i!==0" :src="it.image_src" :key="i"></image>
					</template>
				</view>
			</view>
			<!-- 返回顶部 -->
			<view class="to-top" v-if="isShow" @click="toTop">
				<text>^</text>
				顶部
			</view>
		</view>
	</view>
</template>

<script>
		// 导入组件
	import searchBar from '../../components/searchBar.vue';
	export default {
		// 注册组件
		components: {
			searchBar
		},
		data() {
			return {
				// 控制类名显示
				isFocus: false,
				// 轮播图
				swipers: [],
				// 导航数据
				navs: [],
				// 楼层数据
				floors: [],
				// 是否显示
				isShow: false
			}
		},
		onLoad() {
			// 轮播图
			this.getSwipers()
			// 导航栏
			this.getNav()
			// 楼层数据
			this.getFloor()
		},
		//滚动事件
		onPageScroll(e) {
			if (e.scrollTop >= 200) {
				// 显示
				this.isShow = true
			} else {
				// 隐藏
				this.isShow = false
			}
		},
		methods: {
			//返回顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			// 楼层数据
			getFloor() {
				this.$request({
					url: "/api/public/v1/home/floordata",
					method: "get"
				}).then(res => {
					console.log('res:', res)
					this.floors = res
				})
			},
			// 获取轮播图
			getSwipers() {
				// // 使用抽取的接口来做
				// uni.request({
				// 	url:"https://www.uinav.com/api/public/v1/home/swiperdata",
				// 	method:"get",
				// 	success:(res) => {
				// 		if(res.data.meta.status===200){
				// 			this.swipers = res.data.message
				// 		}
				// 	}
				// })
				this.$request({
					url: '/api/public/v1/home/swiperdata',
					method: 'get'
				}).then(res => {
					this.swipers = res
				})
			},
			// 获取导航数据
			getNav() {
				this.$request({
					url: "/api/public/v1/home/catitems",
					method: "get"
				}).then(res => {
					this.navs = res
				})
			}
		}
	}
</script>

<style lang="less">
	.home-container {
		.search-box {
			background-color: #fd2c4b;
			padding: 20rpx;
			position: relative;
			border: green 2rpx;

			input {
				background-color: white;
				padding-left: 50%;
				border-radius: 10rpx;
				transition: .3s;
			}

			icon {
				position: absolute;
				top: 25rpx;
				left: 42%;
				transition: .3s;
			}

			// 动态选择的属性,当search-box有focus这个属性的时候,就添加这些属性
			&.focus {
				input {
					padding-left: 60rpx;
				}

				icon {
					left: 4%;
				}
			}
		}

		.swiper-image {
			width: 100%;
		}

		// 导航区域
		.nav-box {
			height: 194rpx;
			display: flex;
			justify-content: space-around;

			image {
				width: 128rpx;
				height: 140rpx;
			}
		}

		// 楼层区域
		.floor-box {
			.header {
				background-color: #f4f4f4;
				padding: 20rpx;

				image {
					width: 1280rpx;
					height: 100rpx;
				}
			}

			.bottom {
				display: flex;
				padding-left: 20rpx;

				>image {
					width: 232rpx;
					height: 386rpx;
					margin-right: 10rpx;
				}

				.right {
					flex: 1;

					image {
						width: 232rpx;
						height: 188rpx;
						margin-right: 10rpx;
					}
				}
			}
		}


		// 返回顶部
		.to-top {
			position: fixed;
			right: 20rpx;
			bottom: 40rpx;
			width: 120rpx;
			height: 120rpx;
			background-color: rgba(255, 255, 255, .3);
			text-align: center;
			border-radius: 50%;

			text {
				// transform: rotate(-90deg);
				display: block;
			}
		}
	}
</style>
